<script setup lang="ts">

import { UploadFilled } from '@element-plus/icons-vue'

defineProps({
  file: Object,
  step: String,
  useUpload: Boolean,
  format: Array,
  name: String,
  // input:
})

let input = ref<string>('')
const emit = defineEmits(['before-upload', 'bchange'])
const imgHandleUpload = (file: any) => {
  emit('before-upload', file)
  return false
}

const change = () => {
  emit('bchange', input.value)
  return false
}
// const imgHandleUpload = (file: any) => {
//   emit('before-upload', file)
//   return false
// }


</script>
<template>
  <div class="how">
    <div class="convert-label">{{ step }}</div>
    <div class="convert-body">
      <el-upload
        class="upload"
        v-if="useUpload"
        drag
        :before-upload="imgHandleUpload"
        action="//jsonplaceholder.typicode.com/posts/"
        :format="format">
        <el-icon class="el-icon--upload">
          <upload-filled />
        </el-icon>
        <div class="el-upload__text">
          {{ name }}
        </div>
      </el-upload>
      <el-input v-else v-model="input" placeholder="请输入内容" @change="change"></el-input>
    </div>
  </div>
</template>


<style scoped>
.how {
  margin-top: 30px;
  padding: 12px;
  min-height: 60px;
  background-color: #fff;
  cursor: pointer;
  box-shadow: 0 1px 2px 0 rgb(60 64 67 / 30%), 0 1px 3px 1px rgb(60 64 67 / 15%);
  border-radius: .625rem;
  border: 1px solid transparent;
  transition: box-shadow .4s, transform .4s;
  margin-bottom: 20px;
}

.how:hover {
  border: 1px solid #2b932f;
  transform: translateY(-2%);
}

.convert-label {
  align-self: center;
  display: inline-block;
  vertical-align: top;
  width: auto;
  padding: 1px 13px;
  font-size: 11px;
  line-height: 20px;
  text-transform: uppercase;
  background: #259229;
  color: #fff;
  border-radius: 3px;
  margin-bottom: 10px;
}

.convert-body {
  font-size: 13px;
  padding: 5px 0;
  text-align: center;
  /*min-height: 140px;*/
  line-height: 22px;
}

.right {
  background-image: url("../../assets/right.svg");
  background-repeat: no-repeat;
  background-size: 50% 50%;
  width: 100%;
  height: 100%;
  /*background: #259229;*/
  background-position: center;
}


</style>